<template>
	<view class="code" :class="theme + '-bg-middle'">
		<view class="codebox">
			<!-- <QRCanvas :options="options" @updated="updated"></QRCanvas> -->
			<!-- <qrcanvas :options="options" @updated="updated"></qrcanvas> -->
			<!-- <QRCanvas :options="settings" @updated="updated"></QRCanvas> -->
			<tki-qrcode :val="val" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
				:showLoading="false" :onval="true" :loadMake="true" />
		</view>

		<view class="choice">

			<view class="backImg">
				<view class="text">
					<text>{{$t('Code.Icon')}}</text>

				</view>
				<view class="backImgBox">
					<uni-file-picker file-extname="png,jpg" fileMediatype="image" mode="grid" @select="select"
						@delete="del" :limit="1" />
				</view>
			</view>
			<!-- <view class="option" style="padding-right: 0;">
				<view class="text">
					<text>码类型</text>
				</view>
				<view class="radio">
					<radio-group @change="(e) => {
						settings.effect.type = e.detail.value
						if (settings.effect.type !== 'spot') {
							settings.background = [settings.background[0], '']
						}
					}">
						<label v-for="(item, index) in items" :key="item.value">
							<view>
								<radio color="#987165" :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>

					</radio-group>
				</view>
			</view> -->

			<view class="option">
				<view class="text">
					<text>{{$t('Code.Backgroundcolor')}}</text>
				</view>
				<view class="color br-4" @click="$refs.colorPicker1.open()">
					<view class="br-4" :style="{background:background}"></view>
				</view>
			</view>

			<view class="option">
				<view class="text">
					<text>{{$t('Code.Foregroundcolor')}}</text>
				</view>
				<view class="color br-4" @click="$refs.colorPicker2.open()">
					<view class="br-4" :style="{background:foreground}"></view>
				</view>
			</view>

			<view class="option">
				<view class="text">
					<text>{{$t('Code.Cornercolor')}}</text>
				</view>
				<view class="color br-4" @click="$refs.colorPicker3.open()">
					<view class="br-4" :style="{background:pdground}"></view>
				</view>
			</view>

			<!-- <view class="option">
				<view class="text">
					<text>码眼色</text>
				</view>
				<view class="color br-4" @click="$refs.colorPicker4.open()">
					<view class="br-4" :style="{background:settings.innerSquares}"></view>
				</view>
			</view> -->


			<!-- <view class="backImg" v-show="settings.effect.type=='spot'">
				<view class="text">
					<text>背景图</text>
					
				</view>
				<view class="backImgBox">
					<uni-file-picker file-extname="png,jpg" fileMediatype="image" mode="grid" @select="select1"
						@delete="settings.background = [settings.background[0], '']" :limit="1" />
				</view>
			</view> -->

			<view class="btn br-4" :class="theme + '-bg-abox'" @click="bao">
				<text>{{$t('Code.SavetheQRcodetothealbum')}}</text>
			</view>
		</view>

		<t-color-picker ref="colorPicker1" @confirm="confirm1" :color="{r: 255,g: 255,b: 255,a: 1}"></t-color-picker>
		<t-color-picker ref="colorPicker2" @confirm="confirm2" :color="{r: 0,g: 0,b: 0,a: 1}"></t-color-picker>
		<t-color-picker ref="colorPicker3" @confirm="confirm3" :color="{r: 0,g: 0,b: 0,a: 1}"></t-color-picker>
		<!-- <t-color-picker ref="colorPicker4" @confirm="(e) => settings.innerSquares = JSON.parse(JSON.stringify(e)).hex"
			:color="{r: 0,g: 0,b: 0,a: 1}"></t-color-picker> -->

	</view>
</template>

<script>
	// import Vue from 'vue';
	// var QRCanvas = Vue.extend(Component);
	import {
		base64ToPath
	} from '@/components/mmmm-image-tools/index.js'
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	export default {
		components: {
			tColorPicker
		},
		data() {
			return {
				val: '',
				background: '#ffffff',
				foreground: '#000000',
				pdground: '#000000',
				icon: '',
				settings: {
					size: 200,
					padding: 15,
					background: ['#ffffff', ''],
					foreground: [{
						style: '#000000'
					}],
					outerSquares: '#000000',
					innerSquares: '#000000',
					effect: {
						type: 'none',
						value: 1
					},
					data: '',
					logo: {
						image: ''
					},
				},
				items: [{
						value: 'none',
						name: '默认',
						checked: 'true'
					},
					{
						value: 'fusion',
						name: '融合',
					},
					{
						value: 'round',
						name: '圆形'
					},
					{
						value: 'spot',
						name: '斑点'
					},
				],
				current: 0,
				codeImgUrl: '',
				options: {},
				option: {}
			}
		},
		watch: {
			// settings: {
			// 	deep: true,
			// 	handler: 'upDate',
			// },
			// obj: {
			// 	deep: true,
			// 	handler: 'upDate',
			// },
		},
		onLoad() {
			this.$theme()
			uni.getStorage({
				key: 'qrcode',
				success: (res) => {
					this.settings.data = res.data
					this.val = res.data
				}
			})
		},
		onShow() {
			this.$theme()
		},
		onUnload() {
			console.log(666)
			uni.removeStorage({
				key: 'qrcode'
			})
		},
		methods: {
			// updated(e) {
			// 	base64ToPath(e.toDataURL()).then(path => this.codeImgUrl = path)
			// },
			confirm1(e) {
				this.background = JSON.parse(JSON.stringify(e)).hex
			},
			confirm2(e) {
				this.foreground = JSON.parse(JSON.stringify(e)).hex
			},
			confirm3(e) {
				this.pdground = JSON.parse(JSON.stringify(e)).hex
			},
			select(e) {
				this.icon = e.tempFilePaths[0]
			},
			del(e) {
				console.log(e)
				this.icon = ''
			},
			// select2(e) {
			// 	let img = new Image()
			// 	img.src = e.tempFilePaths[0]
			// 	this.settings.logo.image = img
			// },
			upDate() {
				// console.log(666)
				const {
					settings
				} = this

				// const {
				// 	obj
				// } = this

				// const objs = {
				// 	background: obj.background,
				// 	foreground: obj.foreground,
				// 	pdground: obj.pdground,
				// 	icon: obj.icon,
				// }

				const options = {
					size: 200,
					padding: 15,
					background: settings.background,
					outerSquares: settings.outerSquares,
					innerSquares: settings.innerSquares,
					foreground: [{
							style: settings.foreground[0].style
						},
						// outer squares of the positioner
						{
							row: 0,
							rows: 7,
							col: 0,
							cols: 7,
							style: settings.outerSquares
						},
						{
							row: -7,
							rows: 7,
							col: 0,
							cols: 7,
							style: settings.outerSquares
						},
						{
							row: 0,
							rows: 7,
							col: -7,
							cols: 7,
							style: settings.outerSquares
						},
						// inner squares of the positioner
						{
							row: 2,
							rows: 3,
							col: 2,
							cols: 3,
							style: settings.innerSquares
						},
						{
							row: -5,
							rows: 3,
							col: 2,
							cols: 3,
							style: settings.innerSquares
						},
						{
							row: 2,
							rows: 3,
							col: -5,
							cols: 3,
							style: settings.innerSquares
						},
					],
					effect: {
						type: settings.effect.type,
						value: settings.effect.value
					},
					data: settings.data,
					logo: {
						image: settings.logo.image
					},
				}
				// console.log(this.obj.val);
				this.options = options
				// this.obj = objs
			},
			bao() {
				// console.log(this.codeImgUrl)
				uni.$emit('baoc', {})
				// uni.saveImageToPhotosAlbum({
				// 	filePath: this.codeImgUrl,
				// 	success() {
				// 		uni.showToast({
				// 			title: '图片已保存到相册',
				// 			icon: 'success'
				// 		})
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	.code {
		height: 100%;
		overflow: hidden;
		// padding: 40rpx 0 0 0;

		.codebox {
			margin: 40rpx auto;
			height: 400rpx;
			width: 400rpx;
		}

		.choice {
			.backImg {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 168rpx;
				box-sizing: border-box;
				padding: 20rpx 0 20rpx 60rpx;

				.backImgBox {
					width: 62%;
				}
			}

			.option {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 240rpx 20rpx 60rpx;

				.radio {
					width: 85%;

					radio-group {
						display: flex;

						label {
							flex: 1;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #987165;
						}
					}
				}

				.color {
					width: 250rpx;
					height: 40rpx;
					border: 2rpx solid #987165;
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						width: 80%;
						height: 20rpx;
					}
				}
			}

			.text {
				font-size: 24rpx;
				color: #987165;
			}

			.btn {
				// padding: 0rpx 40rpx 0rpx;
				margin: 40rpx 40rpx 0;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}
</style>
